<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 字典管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="codeName" clearable size="mini" style="width: 100px"    class="handle-select mr10" placeholder="字典名称" ></el-input>
                <el-input v-model="typeName" clearable size="mini" style="width: 100px"   placeholder="类型名称"  class="handle-select mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索</el-button>
<!--                <el-button @click='toAdd' type="primary" size="mini"  v-if="$_has('frameData:add')" class="handle-add mr10" style="float: right">添加试题</el-button>-->
            </div>
            <el-button @click='toAdd' type="primary" size="mini"  v-if="$_has('dict:add')"  style="margin-bottom: 10px; margin-top: -10px">字典添加</el-button>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="code" label="字典编码" width="200px"   align="center">
                </el-table-column>
                <el-table-column prop="codeName" label="字典名称" width="200px"  align="center">
                </el-table-column>
                <el-table-column prop="typeCode" label="类型编码" width="150px"  align="center">
                </el-table-column>
                <el-table-column prop="typeName" label="类型名称"  width="200px"  align="center">
                </el-table-column>
                <el-table-column prop="createdBy" label="创建人" width="150px"   align="center">
                </el-table-column>
                <el-table-column prop="createdDate" label="创建时间" width="250px"   align="center">
                </el-table-column>
                <el-table-column prop="updateBy" label="修改人"  width="150px"  align="center">
                </el-table-column>
                <el-table-column prop="updateDate" label="修改时间" width="250px"  align="center">
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button size="mini"  v-if="$_has('dict:edit')" @click="changePower(scope.$index, scope.row) " type="text"   icon="el-icon-edit">修改</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        @current-change="handleCurrentChange" :page-size="10" :pager-count="11" layout="prev, pager, next" :current-page="pageCount" :total="total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="addVisible" width="40%" :append-to-body='true'>
            <!--表单内容-->
            <el-form ref="form" :model="form" label-width="20%" :rules='rules' :hide-required-asterisk='true'>
                <el-form-item label="字典编码" prop='code'>
                    <el-input v-model="form.code" style="width: 60%"   size="mini" type="number"  oninput="if(value.length>8)value=value.slice(0,8)"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop='codeName'>
                    <el-input v-model="form.codeName" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="类型编码" prop='typeCode	'>
                    <el-input v-model="form.typeCode	" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item label="类型名称" prop='typeName'>
                    <el-input v-model="form.typeName" style="width: 60%"   size="mini"></el-input>
                </el-form-item>
                <el-form-item class='deviceManage-el-form-item information-el-form-item'>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
<!--    <div class="dictionary">-->
<!--        <el-row type="flex" class="row-bg" justify="space-between">-->
<!--            <el-col :span="20">-->
<!--                <div class="add-btn">-->
<!--                    <el-button @click='toAdd'  v-if="$_has('dict:add')">字典添加</el-button>-->
<!--                    &lt;!&ndash;<el-button @click='batchDelete'  v-if="$_has('resource:batchDelete')">批量删除</el-button>&ndash;&gt;-->
<!--                </div>-->
<!--            </el-col>-->
<!--        </el-row>-->
<!--        <el-table :data="tableData" border style="width: 100%" >-->
<!--            <el-table-column prop="code" label="字典编码" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="codeName" label="字典名称" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="typeCode" label="类型编码">-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="typeName" label="类型名称" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="createdBy" label="创建人" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="createdDate" label="创建时间" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="updateBy" label="修改人" >-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="updateDate" label="修改时间" >-->
<!--            </el-table-column>-->
<!--            <el-table-column label="操作" width="350">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button size="mini"  v-if="$_has('dict:edit')" @click="changePower(scope.$index, scope.row) ">修改</el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--        </el-table>-->
<!--        <el-pagination @current-change="handleCurrentChange" :page-size="10"  layout="prev, pager, next" :current-page="pageCount" :total="total">-->
<!--        </el-pagination>-->
<!--        <el-dialog :title="title" :visible.sync="addVisible" width="40%" :append-to-body='true'>-->
<!--            &lt;!&ndash;表单内容&ndash;&gt;-->
<!--            <el-form ref="form" :model="form" label-width="20%" :rules='rules' :hide-required-asterisk='true'>-->
<!--                <el-form-item label="字典编码" prop='code'>-->
<!--                    <el-input v-model="form.code" style="width: 60%"   size="mini" type="number"  oninput="if(value.length>8)value=value.slice(0,8)"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="名称" prop='codeName'>-->
<!--                    <el-input v-model="form.codeName" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="类型编码" prop='typeCode	'>-->
<!--                    <el-input v-model="form.typeCode	" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="类型名称" prop='typeName'>-->
<!--                    <el-input v-model="form.typeName" style="width: 60%"   size="mini"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item class='deviceManage-el-form-item information-el-form-item'>-->
<!--                    <el-button type="primary" @click="onSubmit">确定</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </el-dialog>-->
<!--    </div>-->
</template>

<script>
    import getData from '../../getData/api'
    export default {
        name: "dictionary",
        data(){
            return {
                pageCount:1,//当前页数
                tableData:[],
                total:1,//总条数
                addVisible:false,
                typeName:'',
                codeName:'',
                title:"添加字典",
                form:{
                    id:"",//id
                    code:"",//字典编码 （只允许8位数字）
                    codeName:"",//名称
                    typeCode:"",//类型编码
                    typeName:"",//类型名称
                },
                rules:{//必填校验
                    code: [{
                        required: true,
                        message: '字典编码不能为空',
                        trigger: 'blur'
                    }, {
                        pattern: /^\d{8}$/,
                        message: '字典编码只能为8位数字',
                        trigger: 'blur'
                    }],
                    codeName: [{
                        required: true,
                        message: '名称不能为空',
                        trigger: 'blur'
                    }],
                    typeCode:[{
                        required: true,
                        message: '类型编码不能为空',
                        trigger: 'blur'
                    }],
                    typeName:[{
                        required: true,
                        message: '类型名称不能为空',
                        trigger: 'blur'
                    }],
                },
            }
        },
        methods:{
            //翻页触发
            handleCurrentChange(val) {
                //每次翻页都请求数据
                this.pageCount = val
                this.search()
            },
            //添加权限
            toAdd() {
                if (this.form.id!=''){
                    this.initFormData()
                }
                this.title="添加字典"
                this.addVisible = true;//添加字典的弹窗
            },
            //提交添加字典
            onSubmit() {
                //先校验form的必填项
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        let formData = new FormData();
                        Object.keys(this.form).forEach((key) => {
                            formData.append(key, this.form[key]);
                        });//转form-data，后台要求
                        if (this.form.id=='') {//id为空就是添加。不为空就是修改
                            getData.dictAdd(formData)
                                .then((res) => {
                                    this.search()
                                    this.addVisible = false;
                                    if (res.status==200){
                                        this.$message.success(res.message)
                                    }else {
                                        this.$message.error(res.message)
                                    }
                                })
                        }else {
                            getData.editDictData(formData)
                                .then((res) => {
                                    this.search()
                                    this.addVisible = false;
                                    if (res.status==200){
                                        this.$message.success(res.message)
                                    }else {
                                        this.$message.error(res.message)
                                    }
                                })
                        }
                    } else {
                        return false;
                    }});
            },
            //弹出修改权限
            changePower(index,row){
                Object.keys(this.form).forEach(key => {
                    this.form[key] = row[key]
                })
                this.title="修改字典"
                this.addVisible=true
                console.log(this.form)
            },
            //请求权限List数据
            search(){
                let params = {
                    "pageNumber":this.pageCount,
                    "pageSize":10,
                    "pcDict.codeName":this.codeName,
                    "pcDict.typeName":this.typeName,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.dictList(formData)
                    .then(res=>{
                        this.tableData=res.rows
                        this.total=res.total
                    })
            },
            initFormData() {//清空新增修改之类的所有数据
                this.form={
                    id:"",//id
                    code:"",//字典编码 （只允许8位数字）
                    codeName:"",//名称
                    typeCode:"",//类型编码
                    typeName:"",//类型名称
                }
            }
        },

        mounted(){
            this.search();

            // console.log(this.$route)
        },

    }
</script>

<style scoped>
    @import '~assets/styles/main.css';
    /*搜索框*/
    .handle-box {
        margin-bottom: 10px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
